<template>
  <div class="score-goods">
    <div :class="[`score-goods-wrap-${compData.data.mode}`]" :style="wrapStyle">
      <template v-for="goods in compData.data.goodsList" :key="goods">
        <div class="item" :style="itemStyle">
          <div class="item-wrap" :style="itemWrapStyle">
            <sa-image :url="goods.image" :radius="0" :suffix="null"></sa-image>
            <div class="desc">
              <div>
                <div
                  v-if="compData.data.goodsFields.title.show"
                  class="title sa-m-b-8"
                  :class="`sa-table-line-${compData.data.mode}`"
                  :style="{
                    color: compData.data.goodsFields.title.color,
                  }"
                >
                  {{ goods.title }}
                </div>
                <div
                  v-if="compData.data.goodsFields.subtitle.show"
                  class="subtitle sa-table-line-1 sa-m-b-12"
                  :style="{
                    color: compData.data.goodsFields.subtitle.color,
                  }"
                >
                  {{ goods.subtitle }}
                </div>
              </div>
              <div>
                <div class="sa-flex">
                  <div
                    class="score-price sa-flex"
                    v-if="compData.data.goodsFields.score_price.show"
                    :style="{
                      color: compData.data.goodsFields.score_price.color,
                    }"
                  >
                    <div v-if="Number(goods.score_price.price)">
                      ￥{{ goods.score_price.price }}+
                    </div>
                    <img class="score-icon sa-m-r-2" src="/static/images/shop/decorate/score.png" />
                    {{ goods.score_price.score }}
                  </div>
                </div>
                <s
                  v-if="compData.data.goodsFields.price.show"
                  class="price"
                  :style="{
                    color: compData.data.goodsFields.price.color,
                  }"
                >
                  ￥{{ goods.original_price }}
                </s>
                <div class="sales-stock sa-m-t-4">已售{{ goods.sales }}|库存{{ goods.stock }}</div>
              </div>
              <div
                class="button"
                :style="{
                  background:
                    compData.data.buyNowStyle.mode == 1
                      ? 'linear-gradient(90deg,' +
                        compData.data.buyNowStyle.color1 +
                        ',' +
                        compData.data.buyNowStyle.color2 +
                        ')'
                      : compData.data.buyNowStyle.src
                      ? 'url(' + checkUrl(compData.data.buyNowStyle.src) + ')'
                      : compData.data.buyNowStyle.src,
                }"
              >
                {{ compData.data.buyNowStyle.mode == 1 ? compData.data.buyNowStyle.text : '' }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

const props = defineProps(['compData']);

const wrapStyle = computed(() => ({
  display: 'flex',
  'flex-wrap': 'wrap',
  margin: `-${props.compData.data.space / 2}px`,
}));

const itemStyle = computed(() => ({
  width: `${props.compData.data.mode == 1 ? '50%' : '100%'}`,
  padding: `${props.compData.data.space / 2}px`,
  'flex-shrink': 0,
}));

const itemWrapStyle = computed(() => ({
  'border-radius': `${props.compData.data.borderRadiusTop}px ${props.compData.data.borderRadiusTop}px ${props.compData.data.borderRadiusBottom}px ${props.compData.data.borderRadiusBottom}px`,
}));
</script>

<style lang="scss" scoped>
.score-goods {
  .item-wrap {
    background: #fff;
    // box-shadow: 0 5px 21px 0 rgba(234, 234, 234, 0.46);
    position: relative;
    overflow: hidden;
    font-size: 12px;
    .tag {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      .sa-image {
        width: 36px !important;
        height: 22px !important;
      }
    }
    .desc {
      padding: 10px;
      flex: 1;
      .title {
        font-size: 14px;
      }
      .sales-stock {
        color: #c4c4c4;
      }
      .score-icon {
        width: 18px;
        height: 18px;
      }
    }
    .button {
      position: absolute;
      right: 10px;
      bottom: 10px;
      height: 24px;
      line-height: 24px;
      font-size: 12px;
      color: #fff;
      padding: 0 12px;
      border-radius: 12.5px;
      background: linear-gradient(90deg, #fe8900, #ff5e00);
      background-size: 100% 100% !important;
    }
  }
  .score-goods-wrap-1 {
    .sa-image {
      width: 100%;
      height: 140px;
    }
  }
  .score-goods-wrap-2 {
    .item-wrap {
      display: flex;
      height: 140px;
      .sa-image {
        width: 140px;
        height: 140px;
      }
      .desc {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
}
</style>